<template>
  <div>
    <div class="left" @click.self="isallshow">
      <div @click="tohome" class="img">
        <img :src="myinfo.user_head" alt="" />
      </div>
      <div class="sort">
        <div
          class="item"
          :class="act == item.path ? 'active' : ''"
          @click="changeright(item.path)"
          v-for="item in sortdata"
          :key="item.title"
        >
          <i :class="item.icon"></i>
          <h3>{{ item.title }}</h3>
        </div>
      </div>
      <div class="bottm">
        <div class="block" v-if="show">
          <el-slider v-model="value" vertical height="100px"> </el-slider>
        </div>
        <div class="tool-button">
          <i class="el-icon-caret-right"><p></p></i>
          <br />
          <i
            class="el-icon-message-solid"
            :class="show ? 'active' : ''"
            @click="show = !show"
            ><p></p
          ></i>
          <br />

          <i class="el-icon-star-on"><p></p></i>
        </div>
        <div class="nowplay"></div>

        <div class="setting" @click="tosetting">
          <i class="el-icon-s-tools"></i>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="toptool">
        <div class="con-left">
          <span class="id">ID:{{ roomdata.room_id }}</span>
          <span class="name">房间名: {{ roomdata.room_name }}</span>
          <i class="el-icon-headset headset"></i>
          <i
            @click="tochange"
            v-if="room_id == 10269"
            class="el-icon-setting setting"
            ><span class="manage">管理</span></i
          >
        </div>
        <div class="con-right">
          <i class="el-icon-s-custom"
            ><span class="manage"> {{ roomdata.room_online }} 人在线</span></i
          >
        </div>
      </div>
      <div @click="isallshow" class="message-con" ref="message">
        <div class="item" v-for="(item, index) in messagelist" :key="index">
          <div class="user-img">
            <img :src="item.user.user_head" alt="" />
          </div>
          <div class="con">
            <h3 class="">{{ decodeURI(item.user.user_name) }}</h3>
            <h5 v-if="item.type == 'text'" class="textcon">
              {{ decodeURI(item.content) }}
            </h5>
            <div v-else class="sendimg">
              <img :src="item.content" alt="" />
            </div>
            <h5>{{ date_format(item.message_time) }}</h5>
          </div>
        </div>
      </div>
      <div class="send">
        <div class="icon">
          <i class="el-icon-s-custom"></i>
          <i class="el-icon-picture"></i>
        </div>
        <input @keyup.enter="sendmessage" v-model="inputtext" type="text" />
        <div class="sendmessage" @click="sendmessage">发送</div>
      </div>
    </div>

    <hotrooms v-if="act == 'hotrooms'"></hotrooms>
    <mysongs v-else-if="act == 'mysongs'"></mysongs>
    <playingsongs v-else-if="act == 'playingsongs'"></playingsongs>
    <searchsongs v-else-if="act == 'searchsongs'"></searchsongs>
    <mysetting v-else-if="act == 'mysetting'"></mysetting>
    <systemsetting v-else-if="act == 'systemsetting'"></systemsetting>
    <roomsetting v-else-if="act == 'rooms'"></roomsetting>
  </div>
</template>

<script>
import hotrooms from "@/views/hot_rooms/index.vue";
import mysongs from "@/views/my_songs/index.vue";
import playingsongs from "@/views/playing_songs/index.vue";
import roomsetting from "@/views/room_setting/index.vue";
import searchsongs from "@/views/search_songs/index.vue";
import mysetting from "@/views/my_setting/index.vue";
import systemsetting from "@/views/system_setting/index.vue";
import $ from "jquery";
import {
  hotRooms,
  getRoomInfo,
  online,
  saveMyRoom,
  songNow,
  getMessageList,
  messageBack,
  getMyInfo,
  send,
} from "@/api/room/index";
export default {
  components: {
    hotrooms,
    mysongs,
    playingsongs,
    roomsetting,
    searchsongs,
    mysetting,
    systemsetting,
  },

  data() {
    return {
      act: "",
      sortdata: [
        {
          path: "searchsongs",
          icon: "el-icon-s-claim",
          title: "点歌",
        },
        {
          path: "playingsongs",
          icon: "el-icon-s-management",
          title: "已点",
        },
        {
          path: "mysongs",
          icon: "el-icon-s-order",
          title: "歌单",
        },
        {
          path: "hotrooms",
          icon: "el-icon-s-home",
          title: "房间",
        },
      ],
      roomdata: [],
      messagelist: [],
      inputtext: "",
      room_id: "",
      value: 0,
      show: false,
      myinfo: "",
    };
  },

  created() {
    // 获取个人信息
    getMyInfo({
      plat: "pc",
      access_token: localStorage.getItem("access_token"),
      version: 10000,
    }).then((res) => {
      console.log(res);
      this.myinfo = res.data;
    });
    this.room_id = localStorage.getItem("room_id");
    //   获取房间详细
    getRoomInfo({
      plat: "pc",
      access_token: localStorage.getItem("access_token"),
      version: 10000,
      room_id: localStorage.getItem("room_id"),
      room_password: null,
    }).then((res) => {
      console.log(res);
      this.roomdata = res.data;
    });
    //   获取房间详细
    this.init();
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.message.scrollTop = this.$refs.message.scrollHeight;
    });
    console.log(this.date_format(31245678912));
  },

  methods: {
    //时分秒换算
    date_format: function (micro_second) {
      // 总秒数
      var second = Math.floor(micro_second / 1000);
      // 天数

      var hr = Math.floor((second / 3600) % 24);
      // 分钟
      var min = Math.floor((second / 60) % 60);
      // 秒
      var sec = Math.floor(second % 60);
      return hr + "时 " + min + "分 " + sec + "秒 ";
    },
    // 发送消息
    sendmessage() {
      console.log(this.inputtext);
      send({
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
        where: "channel",
        to: localStorage.getItem("room_id"),
        type: "text",
        at: null,
        msg: this.inputtext,
      }).then((res) => {
        console.log(res);
        this.messagelist = [];
        getMessageList({
          access_token: localStorage.getItem("access_token"),
          plat: "pc",
          version: 10000,
          room_id: localStorage.getItem("room_id"),
          page: 1,
          per_page: 100,
        }).then((res) => {
          console.log(res);
          res.data.forEach((el) => [
            this.messagelist.push(JSON.parse(el.message_content)),
          ]);
          this.messagelist = this.messagelist;
        });
        this.inputtext = "";
      });
    },
    isallshow() {
      this.show = false;
      this.act = "";
    },
    // 切换右侧
    changeright(str) {
      console.log(str);
      this.act = str;
    },
    // 跳转到首页
    tohome() {
      this.act = "mysetting";
    },
    // 跳转到设置
    tochange() {
      console.log("object");
      this.act = "rooms";
    },
    tosetting() {
      this.act = "systemsetting";
    },
    init() {
      getMessageList({
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
        room_id: localStorage.getItem("room_id"),
        page: 1,
        per_page: 100,
      }).then((res) => {
        console.log(res);
        res.data.forEach((el) => [
          this.messagelist.push(JSON.parse(el.message_content)),
        ]);
        this.messagelist = this.messagelist.reverse();
      });
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.left {
  width: 80px;
  height: 800px;
  background-color: #666;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px 0 0 20px;
  z-index: 333;
  .img {
    width: 50px;
    height: 50px;
    background-color: #fff;
    margin: 30px auto;
    border-radius: 6px;
    cursor: pointer;
    img {
      width: 50px;
      height: 50px;
      border-radius: 6px;
    }
  }
  .sort {
    width: 50px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin-top: 30px;
    .active {
      color: #ff6700;
    }
    .item {
      transition: 0.4s;
      &:hover {
        color: #ff6700;
      }
      cursor: pointer;
      margin-top: 20px;
      i {
        font-size: 30px;
      }
      h3 {
        font-size: 14px;
      }
    }
  }
  .bottm {
    width: 50px;
    margin: 0 auto;
    margin-top: 170px;
    position: relative;
    .block {
      position: absolute;
      left: 7px;
      top: -120px;
      height: 20px;
      .el-slider {
        .el-slider__runway {
          background-color: red;
          .el-slider__bar {
            background-color: blue;
          }
        }
      }
    }
    .tool-button {
      color: rgba(255, 255, 255, 1);
      font-size: 24px;
      margin-left: -10px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      width: 50px;
      .active {
        color: #ff6700;
      }
      i {
        line-height: 30px;
        transition: 0.4s;
        cursor: pointer;
        &:hover {
          color: #ff6700;
        }

        p {
          font-size: 12px;
          line-height: 12px;
        }
      }
    }
    .nowplay {
      margin: 20px 0;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background-color: #333;
      box-shadow: 0 0 2px 2px rgb(73, 73, 73);
    }

    .setting {
      color: white;
      opacity: 0.6;
      cursor: pointer;
      i {
        font-size: 40px;
        margin-left: 0px;
      }
    }
  }
}
.content {
  width: 1420px;
  height: 800px;
  position: absolute;
  left: 80px;
  top: 0;
  .toptool {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 0 20px 0 0;
    width: 1440px;
    height: 50px;
    display: flex;
    line-height: 50px;
    justify-content: space-between;
    .con-left {
      margin-left: 30px;
      .id {
        padding: 4px;
        border: 2px solid #ff6700;
        font-size: 12px;
        font-weight: 600;
        color: #ff6700;
        border-radius: 4px;
      }
      .name {
        margin-left: 20px;
        font-size: 14px;
        font-weight: 600;
      }
      .headset {
        margin-left: 10px;
        color: #ff6700;
        font-weight: 600;
      }
      .setting {
        margin-left: 15px;
        cursor: pointer;
      }
      .manage {
        padding: 0 2px;
      }
    }
    .con-right {
      margin-right: 30px;
      i {
        color: #ff6700;
        padding: 0 5px;
        .manage {
          padding: 0 5px;
          font-weight: 600;
        }
      }
    }
  }

  // 聊天内容区域
  .message-con {
    width: 1420px;
    height: 550px;
    overflow: auto;
    text-align: left;
    padding-top: 20px;
    padding-left: 20px;
    .item {
      width: 1300px;
      overflow: hidden;
      margin-bottom: 30px;
      .user-img {
        img {
          width: 42px;
          height: 42px;
          border-radius: 4px;
          display: block;
          float: left;
          margin-right: 20px;
        }
      }
      .con {
        float: left;
        width: 332px;
        h3 {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .textcon {
          width: 320px;
          white-space: wrap;
          background-color: #5eadff;
          border-radius: 0 16px 16px 16px;
          padding: 7px 16px;
          height: auto;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
          font-size: 16px;
          font-weight: 400;
          color: white;
        }
        .sendimg {
          background-color: #e5e5e5;
          border-radius: 6px;
          padding: 5px;
        }
        h5 {
          padding: 5px 0;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 1px;
          color: #666;
          margin: 0;
        }
      }
    }
  }
  .send {
    background-color: rgba(255, 255, 255, 0.4);
    width: 1420px;
    height: 158px;
    border-radius: 0 0 20px 20px;
    padding: 10px 10px;
    text-align: left;
    padding-top: 10px;
    .icon {
      margin-top: 0px;
      i {
        font-size: 24px;
        padding: 0 10px;
        color: #999;
      }
    }

    input {
      height: 110px;
      margin-top: 10px;
      margin-left: 10px;
      width: 1300px;
      border: none;
      background-color: rgba(255, 255, 255, 0.6);
      outline: none;
      border-radius: 10px;
      font-size: 20px;
      color: #666;
    }
    .sendmessage {
      float: right;
      width: 100px;
      height: 110px;
      background-color: #fff;
      border-radius: 6px;
      text-align: center;
      line-height: 100px;
      margin-top: 10px;
      color: #999;
      cursor: pointer;
    }
  }
}
</style>